// 工区部门统计 饼图
import type { seriesDataType, pieChartDptDataListType } from './typings'
import { defineComponent, reactive, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import useVuexGetters from '~/hooks/useVuexGetters'
import styles from '~/pages/oam/index.module.scss'

export default defineComponent({
  name: 'PieChartDpt',
  props: ['dataListDpt'],
  setup(props: { dataListDpt: pieChartDptDataListType['dataListDpt'] } = { dataListDpt: [] }) {
    // 初始值
    const state = reactive<seriesDataType>({
      // 搜索
      datas: []
    })
    const assetOverviewVuexState = useVuexGetters('assetOverview', ['customColorList'])

    watch(
      () => props.dataListDpt,
      () => {
        pieInit()
      }
    )

    // mounted
    onMounted(() => {
      createPieInit()
    })

    // methods
    // 初始化echarts实例
    const createPieInit = () => {
      const dom = document.getElementById('department')
      state.myChart = echarts.init(dom!)
      pieInit()
    }

    const pieInit = () => {
      state.datas = []
      props.dataListDpt.map((item) =>
        state.datas.push({
          value: item.regularDeptNum,
          name: item.deptName
        })
      )

      // 绘制图表
      state.myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        title: [
          {
            text: '工区部门统计',
            top: 'center',
            left: 'center',
            textStyle: {
              fontSize: 15,
              fontWeight: 500
            }
          }
        ],
        legend: {
          // 小注释
          type: 'scroll',
          icon: 'circle',
          orient: 'vertical',
          right: 'right',
          y: 'center',
          data: state.datas.map((item) => item.name),
          formatter: function (name: string) {
            let total = 0
            let tarValue = 0
            for (const i in state.datas) {
              total += state.datas[i].value
              if (name === state.datas[i].name) {
                tarValue = state.datas[i].value
              }
            }
            const percent = Math.round((tarValue / total) * 100)
            return `{name|${name}}    {per|${percent}%}`
          },
          color: assetOverviewVuexState.customColorList.value,
          textStyle: {
            // 图例样式
            rich: {
              name: {
                fontSize: 15
              },
              per: {
                fontSize: 18,
                color: 'purple'
              }
            }
          }
        },
        series: [
          {
            color: assetOverviewVuexState.customColorList.value,
            type: 'pie',
            data: state.datas,
            radius: ['45%', '60%'],
            emphasis: {
              // 饼样式
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        ]
      })

      // 建议加上以下这一行代码，不加的话，当浏览器窗口缩小时，超过div界限
      window.addEventListener('resize', function () {
        state.myChart.resize()
      })
    }

    return () => (
      <div class={styles['pie-chart']}>
        <div id="department" class={styles['statistics-map']}></div>
      </div>
    )
  }
})
